<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8" />
	<title>初识Vue</title>
	<!--
			Vue监视数据的原理：
				1. vue会监视data中所有层次的数据。

				2. 如何监测对象中的数据？
								通过setter实现监视，且要在new Vue时就传入要监测的数据。
									(1).对象中后追加的属性，Vue默认不做响应式处理
									(2).如需给后添加的属性做响应式，请使用如下API：
													Vue.set(target，propertyName/index，value) 或 
													vm.$set(target，propertyName/index，value)

				3. 如何监测数组中的数据？
									通过包裹数组更新元素的方法实现，本质就是做了两件事：
										(1).调用原生对应的方法对数组进行更新。
										(2).重新解析模板，进而更新页面。

				4.在Vue修改数组中的某个元素一定要用如下方法：unshift()向头部添加一个
							1.使用这些API:push()、pop()、shift()、unshift()、splice()、sort()、reverse()
							2.Vue.set() 或 vm.$set()
				
				特别注意：Vue.set() 和 vm.$set() 不能给vm 或 vm的根数据对象 添加属性！！！
		-->
	<script type="text/javascript" src="../js/vue.js"></script>
</head>

<body>

	<div id="root">
		<button @click="person.age++">年龄加1</button>
		<button @click="addSex">添加性别属性，默认值，男</button>
		<button @click="person.sex='未知'">修改性别</button>
		<button @click="addFriend">在列表首位添加一个朋友</button>
		<button @click="updateFristName">修改第一个朋友的名字为张三</button>
		<button @click="addHobby">添加一个爱好</button>
		<button @click="updateFristHobby">修改第一个爱好为开车</button>
		<button @click="removeSmoke">过滤掉爱好中的抽烟</button>
		<h2>姓名：{{person.name}}</h2>
		<h2>年龄：{{person.age}}</h2>
		<h2>性别：{{person.sex}}</h2>
		<br>
		朋友：
		<ul>
			<li v-for="f in person.friends" :key="f.id">
				{{f.name}}-{{f.age}}
			</li>
		</ul>
		<br>
		爱好：
		<ul>
			<li v-for="(h,index) in person.hobby" :key="index">
				{{h}}
			</li>
		</ul>
	</div>

	<script type="text/javascript">
		Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
		const vm = new Vue({
			el: "#root",
			data: {
				person: {
					name: "gyl",
					age: 21,
					sex: "",
					hobby: ['抽烟', '喝酒', '烫头'],
					friends: [
						{id:001, name: 'jerry', age: 35 },
						{id:002, name: 'tony', age: 36 }
					]
				},


			},
			methods: {
				addSex(){
					this.$set(this.person, 'sex', '男')
				},
				addFriend(){
                    this.person.friends.unshift({id:003, name: 'jry', age: 31 })
				},
				updateFristName(){
					this.person.friends[0].name="张三"
				},
				addHobby(){
					this.person.hobby.push("123")
				},
				updateFristHobby(){
                    // this.student.hobby.splice(0,1,'开车')
					// Vue.set(this.student.hobby,0,'开车')
					this.$set(this.person.hobby,0,'开车')
				},
				removeSmoke(){
					this.person.hobby = this.person.hobby.filter((h)=>{
						return h !== '抽烟'
					})
				}
			},
		})



	</script>
</body>

</html>